<style>
.pointer{cursor: pointer;}
</style>
<div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6" style="padding-right:5px;">
        <form class="layui-form layui-form-pane fixed-bar-form" action="{:url('deliveryPrint')}?a=get" method="post" id="hisi-table-search1">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">订单号</label>
                    <div class="layui-input-inline">
                      <input type="text" id="client_ordernum" name="client_ordernum" lay-verify="" placeholder="输入订单号" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">物料名称</label>
                    <div class="layui-input-inline">
                      <input type="text" id="name" name="name" lay-verify="" placeholder="输入物料名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">供应商名称</label>
                     <div class="layui-input-inline stall-select">
                         {:Form::select('stall_id','' , $stallsKV, 'stall-ids', 'layui-input','lay-search="" lay-verify="required"')}
                     </div>
                </div>
                <div class="layui-inline">
                    <button type="submit" data-table="leftData" class="layui-btn" lay-submit="search" lay-filter="search">搜索</button>
                    <a data-href="{:url('analysis')}" data-table="leftData" class="layui-btn delivery"  refresh="false" >确定</a>
                    
                </div>
            </div>
        </form>
        <table id="leftData" lay-filter="leftData"></table>
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
        <form class="layui-form layui-form-pane fixed-bar-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <a href="" target="_blank" class="layui-print layui-btn layui-btn-normal">打印</a>
                    <a data-href="" class="layui-btn layui-btn-normal layui-delivery hisi-ajax" callback="deliveryCallback" refresh="false">出库</a>
                </div>
            </div>
        </form>
        <div id="right"></div>
        
    </div>
    
</div>

<script type="text/javascript">
	layui.use([ 'jquery', 'util','table', 'laydate', 'form', 'laytpl','tool','layer' ], function() {
		var $ = layui.jquery;
		var table = layui.table,util = layui.util;
        var table = layui.table;
        var laydate = layui.laydate;
        var form = layui.form;
        var layer = layui.layer;
        $('.stall-select').click(function(){
            $('.stall-select input').val("");
        }); 
        form.on('submit(search)', function(data){
            var formData="&client_ordernum="+data.field.client_ordernum+"&name="+data.field.name+"&stall_id="+data.field.stall_id;
            stableData(formData);
			return false;
		});
        window.stableData=function(formData){
            table.render({
                elem: '#leftData'
                ,url: "{:url('deliveryPrint')}?a=get"+formData //数据接口
                ,id: 'leftData'
                ,page: true //开启分页
                ,skin: 'row'
                ,even: true
                ,limit: 20
                ,limits: [20,50,100,150,200]
                ,text: {
                    none : '暂无相关数据'
                }
                ,toolbar: true
                ,defaultToolbar: ['filter', 'exports', 'print']
                ,cols: [[ //表头
                     {type:'checkbox',width:60}
                    ,{field:'client_ordernum',title : '订单号',templet:function(d){return "<span class='copy-item'>"+d.client_ordernum+"</span>"},width:85}//
                    ,{field:'name',title : '材料名称',templet:function(d){return "<span class='copy-item'>"+d.mInfo.name+"</span>"}}
                    ,{field:'color',title : '颜色',templet:function(d){return d.mInfo.color}}
                    ,{field:'cloth_num',title : '布号'}
                    ,{field:'stall_name',title : '供应商'}
                    ,{field:'reason',title : '退货原因'}
                    ,{field:'type_num',title : '退货数'}   
                    ,{field:'return_length',title : '退料米长',edit:'text',style:'border-bottom:2px dotted #5FB878;'}   
                ]]
                ,done:function(res){
                    table.on('edit(leftData)', function(obj){
                        var value = obj.value //得到修改后的值
                       ,d = obj.data //得到所在行所有键值
                       ,field = obj.field; //得到字段
                       var id=d.id;

                       // 编辑采购总金额
                       if (field == 'return_length') {
                           $.ajax({
                              type: "POST",
                              url: "{:url('returnLengthEdit')}",
                              data: "id="+d.id+"&return_length="+value,
                              dataType:"json",
                              success: function(res){
                                 if (res.code == 1) {
                                    layer.msg(res.msg, {icon: 1});
                                 } else {
                                    layer.msg(res.msg, {icon: 2,anim: 6});
                                 }
                              }
                           });
                       }  
                   });
                }
            });
            form.render('select');
        }
        stableData("");
        var ids=[],query = '';
		$(document).on('click', '.delivery', function(){
            var that = $(this),
                //query = '',
                code = function(that) {
                    var href = that.attr('href') ? that.attr('href') : that.attr('data-href');
                    var tableObj = that.attr('data-table') ? that.attr('data-table') : 'dataTable';
                    if (!href) {
                        layer.msg('请设置data-href参数', {icon: 2,anim: 6});
                        return false;
                    }

                    if ($('.checkbox-ids:checked').length <= 0) {
                        var checkStatus = table.checkStatus(tableObj);
                        if (checkStatus.data.length <= 0) {
                            layer.msg('请选择要操作的数据', {icon: 2,anim: 6});
                            return false;
                        }
                        for (var i in checkStatus.data) {
                            if (i > 0) {
                                query += '&';
                            }
                            query += '&id[]='+checkStatus.data[i].id;
                        }
                    } else {
                        if (that.parents('form')[0]) {
                            query = that.parents('form').serialize();
                        } else {
                            query = $('#pageListForm').serialize();
                        }
                    }
                    
                    $.post(href, query, function(res) {
                       
                        var d=res.data,table="", a=0;;
                        for(var i in d){
                            table += "<table class='layui-table stall-name-"+i+"'>";
                            table += '<thead>';
                            table += "<tr><td colspan='8'>"+i+"</td></tr>"
                            table += '<tr>';
                            table += '<td>订单号</td>';
                            table += '<td>材料名称</td>';
                            table += '<td>颜色</td>';
                            table += '<td>退料原因</td>';
                            table += '<td>退货数</td>';
                            table += '<td>布号</td>';
                            table += '<td>退料米长</td>';
                            table += '<td>操作</td>';
                            table +='</tr>';
                            table += '</thead>';
                            table +='<tbody>';
                            for(var ii in d[i]){
                                table += '<tr class="id-'+d[i][ii].id+'">';
                                table += '<td><span class="copy-item">' + d[i][ii].client_ordernum + '</span></td>';
                                table += '<td>' + d[i][ii]['mInfo']['name'] + '</td>';
                                table += '<td>' + d[i][ii]['mInfo']['color'] + '</td>';
                                table += '<td>' + d[i][ii].reason + '</td>';
                                table += '<td>' + d[i][ii].type_num + '</td>';
                                table += '<td>' + d[i][ii].cloth_num + '</td>';
                                table += '<td>' + d[i][ii].return_length + '</td>';
                                table += '<td><a class="remove pointer blue" data-id="'+d[i][ii].id+'" data-stall-name="'+i+'">移出</a></td>';
                                table +='</tr>';
                                ids[a]=d[i][ii].id;
                                a=a+1;
                            }
                            table +='</tbody>';
                            table += "</table>";
                        }
                        $('#right').html(table);
                        $('.layui-print').attr("href","{:url('print')}?id="+ids);
                        $('.layui-delivery').attr("data-href","{:url('delivery')}?id="+ids);
                    });
                };
                code(that);
            return false;
        });
        $(document).on('click', '.remove', function(){
            var id=$(this).attr('data-id'),stall_name=$(this).attr('data-stall-name');
            $('.id-'+id).remove();
            var reg = new RegExp(id,"g");//g,表示全部替换。
            query=query.replace(reg,"");
            if($('.stall-name-'+stall_name+' tbody').html()=="") $('.stall-name-'+stall_name).remove();
            ids.splice($.inArray( id ,ids),1);
            $('.layui-print').attr("href","{:url('print')}?id="+ids);
            $('.layui-delivery').attr("data-href","{:url('delivery')}?id="+ids);
        });
        window.deliveryCallback = function(obi,res){
            if(res.code==1){
                table.reload('leftData');
                $('#right').html('');
            }
        }
	});
</script>